<script setup>
import { ref, watch } from 'vue'
import { getEmployeeTop10Service } from '@/api/report'

const props = defineProps({
  dateRange: {
    type: Object,
    required: true
  }
})

const employeeRankingData = ref()

const getEmployeeTop10 = async () => {
  const res = await getEmployeeTop10Service(props.dateRange)
  employeeRankingData.value = res.data.data
}

watch(() => props.dateRange, getEmployeeTop10, { immediate: true })
</script>

<template>
  <el-table :data="employeeRankingData" style="width: 100%; height: 350px">
    <el-table-column prop="employeeId" label="ID"></el-table-column>
    <el-table-column prop="employeeName" label="员工姓名"></el-table-column>
    <el-table-column prop="serviceCount" label="服务总次数"></el-table-column>
    <el-table-column prop="serviceAmount" label="服务总金额">
      <template #default="{ row }"> {{ (row.serviceAmount / 100).toFixed(2) }}元</template>
    </el-table-column>
    <template #empty>
      <el-empty description="没有数据"></el-empty>
    </template>
  </el-table>
</template>
